<template>
  <el-select
    :value="value"
    @input="change($event)"
    v-bind="$attrs"
    :placeholder="placeholder"
    ref="template"
    @visible-change="(v) => visibleChange(v, 'template')"
  >
    <el-option
      v-for="t in data"
      :key="t.name"
      :label="t.name"
      :value="t.name"
    />
  </el-select>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => [],
    },
    value: {
      type: String,
      default: () => "",
    },
    placeholder: {
      type: String,
      default: () => "",
    },
    buttonLabel: {
      type: String,
      default: () => "添加",
    },
    isBtn:{
      type:Boolean,
      default:true
    }
  },
  methods: {
    visibleChange(visible, refName) {
      this.$nextTick(() => {
        if (visible && this.isBtn) {
          const ref = this.$refs[refName];
          let popper;
          if (ref.popperPaneRef)
            popper = ref.popperPaneRef.children[0];
          if (
            !Array.from(popper.children).some(
              (v) => v.className === "el-select-dropdown"
            ) && !Array.from(popper.children).some(
              (v) => v.className === "m-mark"
            )
          ) {
            const el = document.createElement("div");
            el.style = "text-align: center;padding: 3px 10px;";
            el.classList.add('m-mark')
            el.innerHTML = `<button aria-disabled="false" style="width: 100%;" type="button" class="el-button el-button--primary"><span class="">${this.buttonLabel}</span></button>`;
            popper.appendChild(el);
            el.onclick = () => {
              this.$emit("botton-click");
            };
          }
        }
      });
    },
    change(value) {
      this.$emit("change", value);
    },
  },
};
</script>
